<html>
    <head>
    <meta charset="utf-8">
     <meta name="author" content="王建春">
    <script src="./jquery-3.1.1.js"></script>
    <title>五星好评</title>
    <style>
        body {
            /*文字大小12px，1.5倍的行间距*/
            font: 12px/1.5;
            font-weight: arial;
            color: #666;
        }
        
        ul,
        p {
            margin: 0;
            padding: 0;
        }
        
        #star {
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        
        #star ul,
        #star span {
            float: left;
            margin: 0 5px;
        }
        
        #star li {
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(star.png);
            background-repeat: no-repeat;
        }
        
        #star li.on {
            background-position: 0 -28px;
        }
        
        #star p {
            position: absolute;
            top: 20px;
            width: 160px;
        }
        
        #star p em {
            color: #f60;
            display: block;
            font-style: normal;
        }
        #star strong{
            color: blue;
        }
    </style>
</head>

<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class="haha"></span>
        <p></p>
    </div>
</body>

</html>
<script>
    var msg = [
        "很不满意|差得太离谱",
        "不满意|部分有破损",
        "一般|质量一般",
        "满意|质量不错",
        "非常满意|质量非常好"
    ];
    var isStar = 0;

    $('ul').each(function () {
        $('li').mouseover(function () {
            showStar($(this).index() + 1);
            $('p').html('<em><b>' + ($(this).index() + 1) + '</b>分 ' +
                msg[$(this).index()].split('|')[0] + '</em>' +
                msg[$(this).index()].split('|')[1]);
            $('p').css('left', 'ul.offsetLeft + this.offsetWidth*this.index');
        });
        $('li').click(function () {
            isStar = $(this).index() + 1;
            $('p').html('');
            $('.haha').html('<strong>' + isStar + '分</strong>（' +
                msg[$(this).index()].split('|') + '）');
            showStar(isStar);
        });
        $('li').mouseout(function () {
            showStar(isStar);
            $('p').html('');
        });
    });

    function showStar(index) {
        $('li').eq(index - 1).nextAll().removeClass('on');
        $('li').eq(index).prevAll().addClass('on');
        if (index == 5) {
            $('li').addClass('on');
        } else if (index == 0) {
            $('li').removeClass('on');
        }
    }

</script>